<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>JSON tutorials</title>
</head>
<body>
	<h1> Learning JSON</h1>
	
	<p id = "demo"></p>
	<!--  
	<script>
		var text = '{"employees":['+
		                          '{"firstName":"Mahmoud","lastName":"Soliman"},'+
		                          '{"firstName":"Ahmed","lastName":"Ashry"},'+
		                          '{"firstName":"Cristiano","lastName":"Ronaldo"}]}';
		
		var obj = JSON.parse(text);
		
		document.getElementById("demo").innerHTML = obj.employees[0].firstName + " "+obj.employees[0].lastName;
	</script>
	-->
	
	<script>
		
		var xmlhttp = new XMLHttpRequest();
		
		xmlhttp.onreadystatechange = function(){
			
			if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
				var arr = JSON.parse(xmlhttp.responseText);
				myFunction(arr);
			}
			
		}
		
		xmlhttp.open("GET","testJSON.txt",true);
		xmlhttp.send();
		
		function myFunction(myArr){
			
			var out = "";
			
			for(var i = 0 ; i <myArr.length ; i++){
				out += '<a href = "'+myArr[i].url+ '">'+myArr[i].display+'</a><br/>';
			}
			document.getElementById("demo").innerHTML = out;
		}
	</script>
</body>
</html>